<template>
  <div class="submission-history">
    <a-table
      :dataSource="submissions"
      :columns="columns"
      :loading="loading"
      :pagination="false"
      size="middle"
    >
      <!-- SQL列自定义渲染 -->
      <template #bodyCell="{ column, text }">
        <template v-if="column.dataIndex === 'sql'">
          <div 
            class="max-w-md truncate cursor-pointer hover:text-blue-500" 
            :title="text"
            @click="copySql(text)"
          >
            {{ text }}
          </div>
        </template>
        <template v-else-if="column.dataIndex === 'status'">
          <a-tag :color="text === '执行通过' ? 'success' : 'error'">
            {{ text }}
          </a-tag>
        </template>
        <template v-else-if="column.dataIndex === 'executionTime'">
          <span>{{ text }}ms</span>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup>
import { message } from 'ant-design-vue';

// 复制SQL功能
const copySql = async (sql) => {
  try {
    await navigator.clipboard.writeText(sql);
    message.success('SQL已复制到剪贴板');
  } catch (err) {
    message.error('复制失败');
    console.error('复制失败:', err);
  }
};

const columns = [
  {
    title: 'SQL语句',
    dataIndex: 'sql',
    key: 'sql',
    ellipsis: true,
    width: '40%',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: '80px',
  },
  {
    title: '语言',
    dataIndex: 'language',
    key: 'language',
    width: '80px',
  },
  {
    title: '执行用时',
    dataIndex: 'executionTime',
    key: 'executionTime',
    width: '80px',
  },
    {
    title: '执行时间',
    dataIndex: 'createTime',
    key: 'createTime',
    width: '150px',
  }
];

defineProps({
  submissions: {
    type: Array,
    default: () => [],
  },
  loading: {
    type: Boolean,
    default: false,
  },
});
</script>

<style scoped>
.submission-history {
  padding: 16px;
  height: 100%;
  overflow: auto;
}

:deep(.ant-table-wrapper) {
  height: 100%;
}

:deep(.ant-table) {
  height: 100%;
}
</style>
